<template>
  <view class="container">
 
    <!-- 生产功能模块 - 所有角色可见 -->
    <view class="section" v-if="checkPermi(['mes:todo:list'])">
      <view class="section-title">生产功能</view>
      <view class="grid-container">
        <!-- <view class="grid-item" v-if="checkPermi(['mes:production:task'])"
          @click="changeGrid">
          <image src="/static/images/icon/processing.png" class="icon-image"></image>
          <text>生产任务</text>
        </view>
        <view class="grid-item" @click="changeGrid">
          <image src="/static/images/icon/processing.png" class="icon-image"></image>
          <text>工时管理</text>
        </view> -->
        <view class="grid-item" @click="navigateTo('/packageProduction/pages/todo')" v-if="checkPermi(['mes:todo:list'])">
          <image src="/static/images/icon/processing.png" class="icon-image"></image>
          <text>待办</text>
        </view>
      </view>
    </view>

    <!-- 订单管理模块 - 管理员和经理可见 -->
    <view class="section"  v-if="checkPermi(['mes:order:input:list']) || checkPermi(['mes:order:out:list']) || checkPermi(['mes:auxiliary:input:list']) || checkPermi(['mes:auxiliary:out:list'])">
      <view class="section-title">订单</view>
      <view class="grid-container">
        <view class="grid-item"  @click="navigateTo('/packageOrder/pages/inbound')"  v-if="checkPermi(['mes:order:input:list'])">
          <image src="/static/images/icon/processing.png" class="icon-image"></image>
          <text>产品入库</text>
        </view>
        <view class="grid-item" @click="navigateTo('/packageOrder/pages/outbound')" v-if="checkPermi(['mes:order:out:list'])">
          <image src="/static/images/icon/processing.png" class="icon-image"></image>
          <text>产品出库</text>
        </view>
        <view class="grid-item" @click="navigateTo('/packageMaterial/pages/auxiliary-in')" v-if="checkPermi(['mes:auxiliary:input:list'])">
          <image src="/static/images/icon/processing.png" class="icon-image"></image>
          <text>辅料入库</text>
        </view>
        <view class="grid-item" @click="navigateTo('/packageMaterial/pages/auxiliary-out')" v-if="checkPermi(['mes:auxiliary:out:list'])">
          <image src="/static/images/icon/processing.png" class="icon-image"></image>
          <text>辅料出库</text>
        </view>
        <!-- <view class="grid-item" @click="changeGrid" v-if="checkPermi(['mes:order:list'])">
          <image src="/static/images/icon/processing.png" class="icon-image"></image>
          <text>生产订单</text>
        </view>
        <view class="grid-item" @click="changeGrid" v-if="checkPermi(['mes:order:list'])">
          <image src="/static/images/icon/processing.png" class="icon-image"></image>
          <text>事项单</text>
        </view> -->
      </view>
    </view>

    <!-- 项目管理模块 - 管理员和经理可见 -->
    <view class="section" v-if="checkPermi(['mes:project:detail'])">
      <view class="section-title">项目管理</view>
      <view class="grid-container">
        <view class="grid-item" @click="navigateTo('/packageProject/pages/list')">
          <image src="/static/images/icon/processing.png" class="icon-image"></image>
          <text>项目列表</text>
        </view>
      </view>
    </view>

    <!-- 物料生产模块 - 管理员和仓库管理员可见 -->
    <view class="section" v-if="checkPermi(['mes:auxiliary:list'])" >
      <view class="section-title">物料生产</view>
      <view class="grid-container">
       
        <view class="grid-item"  @click="navigateTo('/packageMaterial/pages/auxiliary-manage')" v-if="checkPermi(['mes:auxiliary:list'])">
          <image src="/static/images/icon/processing.png" class="icon-image"></image>
          <text>辅料管理</text>
        </view>
        <view class="grid-item"  @click="navigateTo('/packageOrder/pages/inventory')" v-if="checkPermi(['mes:auxiliary:list'])">
          <image src="/static/images/icon/processing.png" class="icon-image"></image>
          <text>库存管理</text>
        </view>
      </view>
    </view>

    <!-- 客户管理模块 - 仅管理员可见 -->
    <view class="section" v-if="checkPermi(['mes:company:list'])">
      <view class="section-title">客户管理</view>
      <view class="grid-container">
        <view class="grid-item" @click="navigateTo('/packageCustomer/pages/index')">
          <image src="/static/images/icon/processing.png" class="icon-image"></image>
          <text>客户管理</text>
        </view>
      </view>
    </view>

    <!-- 人员管理模块 - 仅管理员可见 -->
    <view class="section" v-if="checkPermi(['system:user:list'])">
      <view class="section-title">人员管理</view>
      <view class="grid-container">
        <view class="grid-item" @click="navigateTo('/packageStaff/pages/index')">
          <image src="/static/images/icon/processing.png" class="icon-image"></image>
          <text>人员管理</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { checkPermi, checkRole } from '@/utils/permission'

export default {
  data() {
    return {}
  },
  mounted() {
    // 打印当前用户的权限信息
    // console.log('当前用户权限:', this.$store.getters.permissions)
    // console.log('当前用户角色:', this.$store.getters.roles)
  },
  methods: {
    checkPermi(value) {
      const result = checkPermi(value)
      // console.log('权限检查:', value, '结果:', result)
      return result
    },
    checkRole(value) {
      const result = checkRole(value)
      // console.log('角色检查:', value, '结果:', result)
      return result
    },
    navigateTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    changeGrid(e) {
        this.$modal.showToast('模块建设中~')
      }
  }
}
</script>


<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
}

.status-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  margin: 20rpx 0;

.status-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  text-align: center;
}

.status-content {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.status-item {
  text-align: center;

.number {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #007aff;
  margin-bottom: 8rpx;
}

.label {
  font-size: 28rpx;
  color: #666;
}
}
}

.section {
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.grid-container {
  display: flex;
  flex-wrap: wrap;

.grid-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;

.icon-image {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 10rpx;
}

text {
  font-size: 24rpx;
  color: #666;
}
}
}
}
</style>

